<!-- 个人信息 -->
<template>
  <div style="height: 100%">
    <el-container style="height: 100%">
      <el-header height="40px" style="text-align: center">
        <!-- Header content -->
        <div class="banner">
          <img src="/img/renzheng.png" />
          <span class="title">个人信息</span>
          <span v-show="!isEdit" class="gotoEdit" @click="clickEdit"
            ><i class="el-icon-edit-outline"></i>编辑</span
          >
        </div>
      </el-header>
      <el-main v-show="!isEdit" class="userInfoBox info-box" height="auto">
        <!-- Main content -->
        <div class="avatar-box">
          <el-avatar class="avatar" :src="user.avatar" :size="120" fit="cover">
          
            <i class="el-icon-user-solid" />
          </el-avatar>
        </div>
        <ul>
          <li>
            <span class="leftTitle"> 昵称 </span>
            <span>{{ user.nickName }}</span>
          </li>
          <li>
            <span class="leftTitle"> 性别</span>
            <span>{{ getSexStr(user.sex) }}</span>
          </li>
          <li>
            <span class="leftTitle"> 简介 </span>
            <span>{{ user.profile }}</span>
          </li>
          <li>
            <span class="leftTitle"> 生日 </span>
            <span>{{ user.birthday?(user.birthday+"").split(" ")[0]:"" }}</span>
          </li>
          <li>
            <span class="leftTitle"> 住址 </span>
            <span>{{ user.address }}</span>
          </li>
          <li>
          <span class="leftTitle">积分</span>
          <span>{{ user.integral }}</span>
          </li>
        </ul>
      </el-main>
      <el-main v-show="isEdit" class="userInfoBox edit-box" height="auto">
        <!-- Main content -->
        <div class="avatar-box">
          <el-upload
            class="avatar-uploader"
            ref="upload"
            action=""
            :show-file-list="false"
            :auto-upload="false"
            :before-upload="beforeUpload"
            :on-change="changeFile"
            :on-exceed="handleExceed"
            :limit="2"
          >
            <img ref="uploadImg" v-if="imgUrl" :src="imgUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="tip" class="el-upload__tip">
              只能上传png、jpg、jpeg图片，且不超过2M
            </div>
          </el-upload>
        </div>
        <ul>
          <li>
            <span class="leftTitle"> 昵称 </span>
            <span class="input-box">
              <el-input
                v-model="form.nickName"
                placeholder="请输入昵称"
                size="normal"
              ></el-input>
            </span>
          </li>
          <li>
            <span class="leftTitle"> 性别</span>
            <span class="input-box"
              ><el-select v-model="form.sex" placeholder="选择性别">
                <el-option label="男" :value="0"> </el-option>
                <el-option label="女" :value="1"> </el-option>
              </el-select>
            </span>
          </li>
          <li>
            <span class="leftTitle"> 简介 </span>
            <span class="input-box"
              ><el-input
              style="width: 480px;"
                v-model="form.profile"
                placeholder="请输入简介"
                size="normal"
              ></el-input>
            </span>
          </li>
          <li>
            <span class="leftTitle"> 生日 </span>
            <span class="input-box"
              >
              <el-date-picker v-model="form.birthday" type="date" size="normal" placeholder="选择生日" value-format="yyyy-MM-dd HH:mm:ss" >
              </el-date-picker>
              
            </span>
          </li>
          <li>
            <span class="leftTitle"> 住址 </span>
            <span class="input-box"
              ><el-input
                v-model="form.address"
                placeholder="请输入住址"
                size="normal"
              ></el-input>
            </span>
          </li>
        </ul>
        <div class="footer" style="margin-top: 40px">
          <el-button style="width: 120px;height:20px" size="default" @click="isEdit = !isEdit">返回</el-button>
          <el-button 
            style="margin-left: 50px;width: 120px;height:20px"
            type="primary"
            size="default"
            @click="submitForm"
            >提交</el-button
          >
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getUserInfo, updateUserInfo } from "@/api/user/user";
export default {
  name: "personalDetails",
  data() {
    return {
      isEdit: false,
      user: {},
      form: {
      },
      uploadFile: null,
      imgUrl: null,
    };
  },
  methods: {
    beforeUpload(file) {
      let fileSize = file.size;
      const MAX_SIZE = 2 * 1024 * 1024;
      if (fileSize > MAX_SIZE) {
        this.$message.error("最大上传2M！");
        return false;
      }
      let fileName = file.name;
      const isTypeValid =
        file.type == "image/png" ||
        file.type == "image/jpg" ||
        file.type == "image/jpeg";
      if (!isTypeValid) {
        this.$message.error("只能上传png、jpg、jpeg！");
        return false;
      }
      return true;
    },
    changeFile(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1); //重新上传时删除前一次上传的文件
      }
      console.log("清空后文件列表大小", fileList);
      console.log(file);
      this.uploadFile = fileList[0].raw;
      this.imgUrl = URL.createObjectURL(fileList[0].raw);
      console.log(this.imgUrl);
    },
    handleExceed() {
      this.$message({
        type: "error",
        message: "最多支持一个图片上传",
      });
    },
    submitForm() {
      const params = new FormData();
      console.log("form-submit:",this.form);
      this.form.nickName?params.append("nickName", this.form.nickName):"";
      (this.form.sex||this.form.sex===0)?params.append("sex", this.form.sex):"";
      this.form.profile?params.append("profile", this.form.profile):"";
      this.form.birthday?params.append("birthday", this.form.birthday):"";
      this.form.address?params.append("address", this.form.address):"";
      // console.log(this.form);
      if(this.uploadFile){
        params.append("avatarFile", this.uploadFile);
      }
      // console.log(params)
      updateUserInfo(params).then((res) => {
        this.$notify({
          title:"成功",
          type:"success",
          message:"更新成功"
        })
        getUserInfo().then((res) => {
          console.log("用户信息：", res.data);
          this.user = res.data;
          
          this.isEdit = ! this.isEdit
          this.$bus.$emit("my-info-updated",res.data)
        });
      });
    },
    clickEdit() {
      this.isEdit = !this.isEdit;
      this.form = Object.assign({}, this.user);
    },
    getInfo() {
      getUserInfo().then((res) => {
        console.log("用户信息：", res.data);
        this.user = res.data;
      });
    },
    getSexStr(sex) {
      if (sex == 0) return "男";
      if (sex == 1) return "女";
      return "";
    },
  },
  created() {
    this.getInfo();
  },
};
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.banner {
  line-height: 35px;
  position: relative;
}
.help-manage {
  width: 100%;
  height: 100%;
  display: flex;
}
.banner img {
  width: 35px;
  height: 35px;
  vertical-align: middle;
}
.title {
  font-size: 25px;
  color: rgb(163, 220, 243);
  display: inline-block;
  vertical-align: middle;
}
.info-box /deep/ .avatar {
  transition: all 0.5s;
}
.avatar /deep/ img {
  width: 100%;
  height: 100%;
}
.info-box .avatar:hover {
  transform: rotate(360deg);
}
.avatar-box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.userInfoBox .leftTitle {
  display: inline-block;
  width: 100px;
  padding: 10px 0;
}
.userInfoBox li {
  padding: 20px;
  border-bottom: 1px solid #ddd;
}
.userInfoBox li:first-child {
  margin-top: 50px;
}
.gotoEdit {
  font-size: 15px;
  /* float: right; */
  position: absolute;
  right: 0px;
  cursor: pointer;
  color: #999;
  user-select: none;
}
.gotoEdit:hover {
  color: #333;
}
.input-box {
  display: inline-block;
  width: 200px;
}
.footer {
  text-align: center;
}

.edit-box /deep/ .avatar-uploader {
  display: inline-block;
  vertical-align: top;
  text-align: center;
}
.edit-box /deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
}
.edit-box /deep/ .avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.edit-box /deep/ .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}
.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}
</style>